<template>
	<view>
		<u-popup :show="show" mode="right" closeable @close="close" @open="open">
			<view class="popup-box">
				<view style="margin: 20rpx;font-size: 30rpx;font-weight: 800;">请选择你的身份</view>
				<view style="margin-top: 30rpx;">
					<view class="line-box" 
						:style="sel === key ? 'border: 1px solid #3c9cff;': ''" 
						hover-class="hover_sty" 
						v-for="(it,key) in list"
						@click="selRole(key)"
					>
						<view style="font-size: 28rpx;">{{it.company}}</view>
						<view style="font-size: 26rpx;display: flex;margin-top: 10rpx;align-items: center;">
							<text>{{it.name}}</text>
							<view style="width: 10rpx;"></view>
							<u-tag text="总账户" v-if="it.role === 'admin'" size="mini"></u-tag>
							<u-tag text="报价师" v-else-if="it.role === 'quoter'" type="warning" size="mini"></u-tag>
							<u-tag :text="it.roleName" v-else type="success" size="mini"></u-tag>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"role-popup",
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				sel: 0,
				list: [
					{company:'重庆环云芯科技有限公司', name: '张三', role: 'admin', roleName: '总账户'},
					{company:'重庆环云芯科技有限公司', name: '张三', role: 'quoter', roleName: '报价师'},
					{company:'大渝优品', name: '张三', role: 'company', roleName: '公司'},
					{company:'大渝优品', name: '张三', role: 'store', roleName: '店长'},
					{company:'大渝优品', name: '张三', role: 'clerk', roleName: '店员'},
				]
			};
		},
		methods: {
			open() {
				console.log("弹出层打开事件");
				console.log(this.$constant.ROLE_INFO_KEY)
			},
			close() {
				this.$emit("close");
			},
			selRole(e) {
				this.sel = e;
				const roleStr = this.list[e].role;
				uni.setStorage({
					key: this.$constant.TAB_INDEX,
					data: 0
				})
				uni.setStorage({
					key: this.$constant.ROLE_INFO_KEY,
					data: this.list[e]
				})
				uni.reLaunch({
					url:"/pages/index/index"
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.line-box{
		background-color: $uni-bg-color-hover;
		padding: 20rpx 30rpx;
		margin: 10rpx 20rpx;
		border-radius: 10rpx;
	}
	.hover_sty {
		background-color: $uni-bg-color;
	}
</style>